import { Flex, Input, Radio } from 'antd'
import './index.scss'
import PIcon from '@/component/common/pIcon'
import { alphabets } from '@/config/globalConfig';

export type Selection = {
  value: string
  label: string
  content: string
}
export interface SingleChoiceProps {
  selections?: Array<Selection>
  answer?: string
  state: 'QUESTYPE' | 'WRITE' | 'READ' | 'PREVIEW' | 'TODO'
  onSelectionChange?: (selections: any) => void
  onAnswerChange?: (answer: string) => void
}

function SingleChoice(props: SingleChoiceProps) {
  let { selections = [], state = 'QUESTYPE', onSelectionChange = () => { },
    onAnswerChange = () => { },
    answer = '' } = props

  if (state === 'QUESTYPE') {
    selections = [
      { label: 'A', value: 'A', content: '选项1' },
      { label: 'B', value: 'B', content: '选项2' },
      { label: 'C', value: 'C', content: '选项3' },
      { label: 'D', value: 'D', content: '选项4' },
    ]
  }
  const appendSelection = (index: number) => {
    if (selections.length >= 10) return;
    const newSelection = { label: alphabets[selections.length], value: alphabets[selections.length], content: '' };
    const newSelections = [...selections.slice(0, index + 1), newSelection, ...selections.slice(index + 1)];
    newSelections.forEach((selection, idx) => {
      selection.label = alphabets[idx];
      selection.value = alphabets[idx];
    });
    onSelectionChange(newSelections);
  }
  const removeSelection = (index: number) => {
    if (selections.length <= 2) return;
    const newSelections = [...selections.slice(0, index), ...selections.slice(index + 1)];
    newSelections.forEach((selection, idx) => {
      selection.label = alphabets[idx];
      selection.value = alphabets[idx];
    });
    onSelectionChange(newSelections);
  }
  return (
    <div>
      <Radio.Group disabled={['READ','PREVIEW'].includes(state)} onChange={(e) => {
        onAnswerChange(e.target.value)
      }} value={answer}>
        <Flex gap={'5px'} vertical>
          {selections.map((item, index) => {
            return (
              <Radio key={item.value} value={item.value}>
                <Flex align="center" gap="0.3rem">
                  <span style={{ width: '20px' }}>{item.label}</span>
                  {
                    ['READ','PREVIEW'].includes(state) ? <div>{item.content}</div> : <Input
                      disabled={['READ','PREVIEW'].includes(state)}
                      style={{ minWidth: '500px' }}
                      key="name"
                      placeholder="请输入"
                      value={item.content}
                      allowClear
                      onChange={(e) => {
                        selections[index].content = e.target.value
                        onSelectionChange(selections)
                      }}
                    />
                  }
                  {
                    ['WRITE'].includes(state) && (
                      <>
                        <PIcon name="icon-add-circle" size={20} onClick={() => {
                          appendSelection(index)
                        }}></PIcon>
                        <PIcon name="icon-minus-circle" size={20} onClick={() => {
                          removeSelection(index)
                        }}></PIcon>
                      </>
                    )
                  }
                </Flex>
              </Radio>
            )
          })}
        </Flex>
      </Radio.Group>
    </div>
  )
}

export default SingleChoice
